Essential Extensions - Visual Studio Code

I originally used VS Code only as a file browser for WSL and had very few extensions installed. However, as I have recently started working with Vue, I decided to compile this list of my go-to extensions to ensure I don't miss any when setting up VS Code on a new machine in the future.

General & Appearance

• Chinese (Traditional) Language Pack for Visual Studio Code: Traditional Chinese language pack for VS Code.
• Visual Studio Keymap: Enables Visual Studio keyboard shortcuts in VS Code. Since I primarily use Visual Studio for development, this helps maintain a consistent experience across both, reducing the cost of context switching.
• Material Icon Theme: Provides a rich and highly recognizable set of file icons.
• EditorConfig for VS Code: Supports .editorconfig files, ensuring consistent coding styles (such as indentation and line endings) across different editors and IDEs.

Developer Experience (DX)

• Error Lens:
  • Displays errors, warnings, and diagnostic messages directly at the end of the line of code and highlights the entire line.
• Code Spell Checker:
  • Checks for spelling errors in your code (supports naming conventions like CamelCase).

Markdown Editing

• Markdown All in One: Provides comprehensive support for Markdown writing, including shortcuts, Table of Contents (TOC) generation, and list editing.
• Markdown Preview Enhanced: A feature-rich Markdown preview extension that supports mathematical formulas (KaTeX/MathJax), Mermaid diagrams, code execution, and various export formats (PDF, HTML, etc.).
• markdownlint: Checks Markdown syntax and formatting against the markdownlint rule set in real-time and provides auto-fix functionality.

Frontend Development

• Vue - Official: The official development tool recommended for Vue (formerly Volar).
  • Provides syntax highlighting, IntelliSense, and TypeScript support for Vue 3.
• ESLint: Integrates ESLint into VS Code to display syntax errors and style issues in real-time.
• Prettier - Code formatter: A code formatting tool.
• Auto Close Tag: Automatically closes HTML/XML tags.
• Auto Rename Tag: Automatically renames the closing tag when the opening tag is modified.
• Pretty TypeScript Errors: Formats and highlights verbose and hard-to-read TypeScript error messages.

Testing

• Playwright Test for VSCode:
  • The official Playwright testing extension.
  • Supports running tests directly in the editor, debugging, recording new tests, and generating selectors.
  • A must-have if you use Playwright for E2E testing.

Containers & DevOps

• Container Tools:
  • Replaces the legacy Docker extension.
  • Includes all features from the Docker extension, with additional Podman support and other capabilities.
  • If you only need container tools, this is the only one you need to install.
• Docker DX:
  • Focused on Developer Experience (DX), providing IntelliSense, syntax checking, and debugging for Dockerfile and Compose files.
  • Supports BuildKit integration and syntax suggestions.
• Dev Containers:
  • Allows developers to use a container as a full-featured "development environment."
  • Using a .devcontainer configuration within a project ensures all developers use the exact same toolchain and runtime, eliminating the need to install dependencies on the local machine.
• WSL:
  • Allows VS Code to connect directly to WSL (Windows Subsystem for Linux).
  • This lets you run the VS Code UI on Windows while all terminal commands, compilation, and execution happen in the Linux environment—the best solution for Windows developers using Linux toolchains.

AI Assistance

• GitHub Copilot: AI code completion tool to improve writing efficiency.
• GitHub Copilot Chat: An AI chat interface integrated into the sidebar, useful for asking about code explanations, refactoring, and debugging.

Other VS Code-based Editor Tools

The following are extensions for editors based on VS Code. Since the extension ecosystem for these editors is largely the same as VS Code, I refer to this note when using them, so I have recorded them here as well.

• Antigravity Cockpit:
  • Used to check usage quotas for various Antigravity models.

Changelog

• 2026-01-15 Initial version created.
• 2026-03-25 Added Markdown Preview Enhanced and markdownlint extensions; removed Markdown Preview Mermaid Support (functionality is now covered by the former); separated Markdown-related extensions into a "Markdown Editing" section.